<template>
  <view class="el-status-bar" :style="rootStyle">
    <view class="el-status-bar--height" :style="statusBarHeight" />
    <slot />
  </view>
</template>

<script>
export default {
  name: 'ElStatusBar',
  props: {
    bg: {
      type: String,
      default: 'transparent',
    },
  },
  data() {
    return {}
  },
  computed: {
    rootStyle: function () {
      // const { top, height } = wx.getMenuButtonBoundingClientRect()
      return `background: ${this.bg}`
    },
    statusBarHeight: function () {
      const statusBarHeight = wx.getSystemInfoSync().statusBarHeight
      return `height: ${statusBarHeight}px`
    },
  },
}
</script>

<style lang="scss" scoped>
.el-status-bar {
  width: 100%;
  min-height: 44px;
  .el-status-bar--height {
    height: 20px;
  }
}
</style>
